<template>
  <basic-container v-loading="loading">
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">商户详情</div>
    </div>
    <!-- END goBack -->
    <section class="haruyuki-bg-color-white">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.basicTitle }}</span>
        </div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="basicForm.isGroup == '1'"
          @click="informEdit"
          >修改</el-button
        >
      </div>
      <div class="haruyuki-content">
        <div class="merchant-title mer-m-b-8">
          {{ basicForm.userShortName }}
        </div>
        <div class="merchant-box adaptive">
          <div class="merchant-item-content">
            <span>商户号：{{ basicForm.rpiNo }}</span>
            <span>商户类型：{{ basicForm.userTypeName }}</span>
            <span>行业类型：{{ basicForm.ysMerchantType }}/{{ basicForm.industryName }}/{{ basicForm.mccCdName }}</span>
            <span>注册名称：{{ basicForm.registeredName }}</span>
            <span>门头名称：{{ basicForm.rpiName }}</span>
            <!-- <span>商户简称：{{ basicForm.userShortName }}</span> -->
            <span>所在区域：{{ basicForm.mercProv }}/{{ basicForm.mercCity }}/{{ basicForm.mercArea }}</span>
            <span>服务商：{{ basicForm.serName }}</span>
            <span>客户经理：{{ basicForm.accountManagerName }}</span>
          </div>
          <div class="merchant-item-content">
            <span>法人姓名：{{ basicForm.legalPersonName }}</span>
            <span>法人性别：{{ basicForm.crpGenderName }}</span>
            <span>法人电话：{{ basicForm.legalPersonPhone }}</span>
            <span>法人职业：{{ basicForm.crpProfessionName }}</span>
            <span>法人身份证号：{{ basicForm.legalPersonId }}</span>
            <span>法人身份证有效期：{{ basicForm.legalPersonIdSdate }} 至 {{ basicForm.legalPersonIdEdate }}</span>
            <span>法人省市区：{{ basicForm.legalProvinceName }}/{{ basicForm.legalCityName }}/{{ basicForm.legalAreaName }}</span>
            <span>法人地址：{{ basicForm.crpAddr }}</span>
            <span>社会信用代码：{{ basicForm.businessLicenceNo }}</span>
            <span v-if="basicForm.businessLicenceSDate"
              >营业执照有效期：{{ basicForm.businessLicenceSDate }} 至
              {{ basicForm.businessLicenceEDate }}</span
            >
          </div>
          <div class="merchant-item-content">
            <span>联系人姓名：{{ basicForm.contactsName }}</span>
            <span>联系人身份证号：{{ basicForm.contactPersonId }}</span>
            <span>联系人身份证有效期：{{ basicForm.idValiddateBegin }} 至 {{ basicForm.idValiddateEnd }}</span>
            <span>联系方式：{{ basicForm.contactsPhone }}</span>
            <span>联系人邮箱：{{ basicForm.contactsEmail }}</span>
            <span>联系人通讯地址：{{ basicForm.contactsAddr }}</span>
          </div>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <span
              class="picture-preview haruyuki-mr-20"
              @click.stop="picDetails(basicForm.rpiNo)"
              >资质证件照预览</span
            >
            <span
              class="picture-preview"
              @click.stop="picUpdate(basicForm.rpiNo)"
              >资质证件照补充</span
            >
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-bank-card"></i
        ><span class="haruyuki-ml-6">{{ posTitle.cardTitle }}</span>
      </div>
      <div class="haruyuki-content">
        <div class="mer-m-b-8">
          结算卡类型：{{ account.balanceAccTypeName }}
        </div>
        <div class="merchant-box adaptive">
          <div class="merchant-item-content">
            <span>结算账户名称：{{ account.balanceAccName }}</span>
            <span>结算账户卡号：{{ account.balanceAccCardNo }}</span>
            <span>结算人证件类型：{{ account.certTypeName }}</span>
          </div>
          <div class="merchant-item-content">
            <span>开户行：{{ account.bankName }}</span>
            <span>开户支行：{{ account.openAccBankName }}</span>
            <span>银行预留手机号：{{ account.bankMobile }}</span>
          </div>
        </div>
      </div>

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-set-up"></i
          ><span class="haruyuki-ml-6">{{ posTitle.merchantTitle }}</span>
        </div>
      </div>
      <div class="haruyuki-content merchant-box">
        <div class="merchant-icon-func" v-for="moduleItem in moduleData" :key="moduleItem.id">
          <div v-if="moduleItem.show">
            <el-image
              class="cursor"
              style="width: 60px; height: 60px"
              :src="moduleItem.image"
              fit="fill"
              @click="moduleOperate(moduleItem.id)"
            ></el-image>
            <div class="cursor">{{ moduleItem.name }}</div>
          </div>
        </div>
      </div>

    </section>
    <el-dialog
      :title="'编辑' + dialogText"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <template>
        <div class="el-dialog-div">
          <basic-group-form
            :basicForm="basicForm"
            ref="toBasicForm"
            :isImgShow="false"
          />
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="handleSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      :title="'资质证照预览（' + basicForm.legalPersonName + '）'"
      append-to-body
      :visible.sync="imageVisible"
    >
      <template>
        <imagesPreview :merchantForm="merchantForm" ref="toImagesPreview" />
      </template>
    </el-dialog>
    <!-- <el-dialog
      :title="'资质证照修改（' + basicForm.legalPersonName + '）'"
      width="60%"
      append-to-body
      :visible.sync="imageUpdateVisible"
    >
      <template>
        <imagesUpdate :merchantForm="picUpdateForm" ref="toImagesUpdate" />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="handlePicSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog> -->

    <!-- <el-image-viewer
      style="z-index: 2048"
      v-if="alipayImgShow"
      :on-close="
        () => {
          alipayImgShow = false;
        }
      "
      :url-list="alipayImg"
    ></el-image-viewer> -->
  </basic-container>
</template>

<script>
import {
  getInfoDetail,
  // getPicDetail,
  groupChange,
} from "@/api/rb-oem/posinfo/pos_info_details";
// import { getList as getServiceList } from "@/api/rb-service/serviceinfo/service_info";
import { updateGroupDetail } from "@/api/rb-oem/posinfo/pos_info";

import basicGroupForm from "@/components/rb-merchant/basic-group-form";
import imagesPreview from "@/components/rb-merchant/images-preview";
import imagesUpdate from "@/components/rb-merchant/images-update";
import alterForm from '@/components/rb-merchant/alter-form.vue';

export default {
  components: {
    basicGroupForm,
    imagesPreview,
    imagesUpdate,
    alterForm,
  },
  data() {
    return {
      posTitle: {
        basicTitle: "商户信息",
        cardTitle: "结算信息",
        rateTitle: "费率信息",
        remarkTitle: "备注信息",
        aisleTitle: "支付通道",
        firmTitle: "支付公司",
        hardwareTitle: "硬件设备配置",
        payTitle: "支付信息",
        merchantTitle: "商户管理",
        activityRequest: "活动申请",
      },
      dialogVisible: false,
      dialogType: "", //打开类型 add/edit
      dialogText: "",
      imageVisible: false,
      // imageUpdateVisible: false,
      isAlterShow: false, //是否显示变更表单某内容
      information: {},
      account: {},
      rateInformation: {},
      basicForm: {
        userType: "",
        industryCode: "",
        mccCd: "",
        userShortName: "",
        handHeld: "",
        cardFront: "",
        cardReverse: "",
        legalPersonName: "",
        crpGender: "",
        legalPersonPhone: "",
        crpProfession: "",
        legalPersonId: "",
        legalPersonIdSdate: "",
        legalPersonIdEdate: "",
        mercProvinceCityArea: [],
        legalProvinceCityArea: [],
        mercProvCode: "",
        mercCityCode: "",
        mercAreaCode: "",
        crpAddr: "",
        licensePic: "",
        businessLicence: "",
        businessLicenceNo: "",
        businessLicenceSDate: "",
        businessLicenceEDate: "",
        contactsName: "",
        contactsPhone: "",
        contactsEmail: "",
        contactsAddr: "",
        remark: "",
      },
      moduleData: [
        {
          id: 5,
          name: "解除关联集团商户",
          image: "/img/merchant-icon/group.png",
          type: 'group',
          show: true,
        }
      ],
      merchantForm: {},
      // picUpdateForm: {},
      rpiNo: "",
      merchantId: "",
      rpiExStatus: 0,
      loading: false,
      isAisleShow: "", //通道配置
      rpiStatus: null,
    };
  },
  computed: {
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
  },
  created() {
    this.rpiExStatus = this.$route.query.rpiExStatus;
    this.infoData();
  },
  mounted() {},
  methods: {
    /**
     * @func 商户模块管理
     * @desc 商户模块管理 操作控制
     * */
    moduleOperate(id) {
      switch (id) {
            case 1:
                break;
            case 2:
                break;
            case 3:
                break;
            case 4:
                break;
            case 5:
                this.handleBelongerGroup();
                break;
        }
    },
    /**
     * @func 商户模块管理-5(变更归属集团商户)
     * @desc 变更归属集团商户
     * */
    handleBelongerGroup() {
      this.dialogGroupVisible = true;
      this.$confirm('您确定要解除关联集团商户吗?', '瑞生意提示', {
          confirmButtonText: '确认并解除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.groupSubmit();
        }).catch(() => {
                 
        });
    },
    /**
     * @func 提交已选归属集团商户
     * @desc 提交已选归属集团商户
     * */
    groupSubmit() {
      groupChange({changeType:'2', rpiNo:this.rpiNo}).then(
        () => {
            this.$message({
                type: "success",
                message: "已解除集团商户关联",
            });
            this.goBack();
        },
        (error) => {
            this.$message({
            type: "error",
            message: error,
            });
        }
      );
    },
    /* 页面加载 初始化请求详情接口 */
    infoData() {
      this.rpiNo = this.$route.query.rpiNo;
      getInfoDetail(this.rpiNo).then((res) => {
        this.basicForm = res.data.data.informationVO;
        this.merchantId = res.data.data.informationVO.id;
        this.account = res.data.data.settlementVO;
        this.isAisleShow = res.data.data.isAisleShow;
        this.rpiStatus = res.data.data.rpiStatus;
        // this.rateInformation = res.data.data.rateInformation;
        this.rateInformation = {
          aisleCode: res.data.data.aisleCode,
          aisleName: res.data.data.aisleName,
          codeAdvanceOpen: res.data.data.codeAdvanceOpen
        };
      });
    },
    /* 商户基本信息修改 */
    handleSubmit() {
      const _this = this;
      _this.informEditForm();
    },
    // /**
    //  * @func 资质证件照片提交
    //  * @desc 资质证件照片更换 提交
    //  * */
    // handlePicSubmit() {
    //   updatePicAll(this.picUpdateForm).then(
    //     (res) => {
    //       if (res.data.code == "200") {
    //         this.$message({
    //           type: "success",
    //           message: "修改资质证件照成功!",
    //         });
    //         this.imageUpdateVisible = false;
    //       } else {
    //         this.$message({
    //           type: "error",
    //           message: res.data.message,
    //         });
    //       }
    //     },
    //     (error) => {
    //       window.console.log(error);
    //     }
    //   );
    // },
    handleClose(done) {
      this.emptyForm();
      done();
      this.infoData();
    },
    emptyForm() {
      this.$refs["toBasicForm"].$refs["basicForm"].resetFields();
    },
    informEditForm() {
      this.$refs["toBasicForm"].$refs["basicForm"].validate((valid) => {
        if (valid) {
          this.basicForm.id = this.merchantId;
          updateGroupDetail(this.basicForm).then(
            (res) => {
              if (res.data.code == "200") {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.dialogVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    informEdit() {
      this.dialogVisible = true;
      this.dialogText = "基本信息";
    },
    /* 商户资质证件图片 预览 */
    picDetails(rpiNo) {
      this.$router.push({
        name: "资质证件照预览",
        query: {
          rpiNo: rpiNo
        },
      });
      // this.imageVisible = true;
      // getPicDetail(rpiNo).then((res) => {
      //   if (res.data.code == "200") {
      //     this.merchantForm = res.data.data;
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: res.data.message,
      //     });
      //   }
      // });
    },
    /* 商户资质证件图片 修改 */
    picUpdate(rpiNo) {
      this.$router.push({
        name: "资质证件照补充",
        query: {
          rpiNo: rpiNo
        },
      });
      // this.imageUpdateVisible = true;
      // // getPicUpdateDetail(rpiNo).then((res) => {
      // getPicDetail(rpiNo).then((res) => {
      //   if (res.data.code == "200") {
      //     this.picUpdateForm = res.data.data;
      //     this.picUpdateForm.rpiNo = rpiNo;
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: res.data.message,
      //     });
      //   }
      // });
    },
    /**
     * @func 返回页面
     * @desc 返回页面 goBack
     * */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.merchant-title {
  font-weight: bold;
  font-size: 18px;
}

.merchant-box {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  &.adaptive {
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
  }
  .merchant-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    span {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
    }
  }
  .merchant-icon-func {
    width: calc(100% / 5);
    margin-bottom: 20px;
    text-align: center;
    .cursor {
      cursor: pointer;
    }
  }
  .merchant-icon-card {
    width: calc(100% / 4);
    .item-card {
      // display: flex;
      border-radius: 10px;
      background-color: #FFFFFF;
      padding: 20px;
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      .item-card-label {
        display: flex;
        align-items: center;
      }
      .item-card-content {
        display: flex;
        align-items: center;
        margin-top: 20px;
      }
    }
  }
}

.mer-m-b-8 {
  margin-bottom: 8px;
}

.img-margin-r10 {
  margin-right: 10px;
}

.info-switch {
  width: calc(100% / 2);
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #4663FD;
}

.solid {
  &:before {
    content: "｜";
    color: #99a7b1;
  }
}

.feint-input {
  -webkit-appearance: none;
  background-image: none;
  border-radius: 4px;
  // border: 1px solid #DCDFE6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: inherit;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  // color: #c0c4cc;
  color: #7f7f7f;
  // cursor: not-allowed;
}
</style>